<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
	            border-spacing: 0;
	            border: 1px solid #c0c0c0;
	            width: 300px;
	            margin: 50px auto;
			}
			tr,td,th{
				border: 1px solid #d0d0d0;
	            color: #404060;
	            padding: 10px;
				text-align: center;
			}
			th{
				background-color: #09c;
           		color: #fff;
			}
		</style>
		<script>
			window.onload = function(){
				var checks = document.getElementById("checks");
				var tbody = document.getElementsByTagName("tbody")[0];
				var check = tbody.getElementsByTagName("input");
				
				checks.onclick = function(){
					for(i=0;i<check.length;i++){
						check[i].checked = this.checked;
					}
				}
				for(i=0;i<check.length;i++){
					check[i].onclick = function(){
						var ok = true;
						for(i=0;i<check.length;i++){
							if(check[i].checked == false){
								ok = false;
							}
						}
						checks.checked = ok;
					}
				}
			}
		</script>
	</head>
	<body>
		<table>
			<thead>
				<th>	<input type="checkbox" id="checks"/></th>
				<th>菜名</th>
				<th>饭店</th>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"/></td>
					<td>地三鲜</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>西红柿鸡蛋</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>醋溜土豆丝儿</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>萝卜干炒黄豆儿</td>
					<td>田老师</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
